<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <meta name="twitter:site" content="@metroui">
    <meta name="twitter:creator" content="@pimenov_sergey">
    <meta name="twitter:card" content="summary">
    <meta name="twitter:title" content="Metro 4 Components Library">
    <meta name="twitter:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins  .">
    <meta name="twitter:image" content="https://metroui.org.ua/images/m4-logo-social.png">

    <meta property="og:url" content="https://metroui.org.ua/v4/index.html">
    <meta property="og:title" content="Metro 4 Components Library">
    <meta property="og:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins  .">
    <meta property="og:type" content="website">
    <meta property="og:image" content="https://metroui.org.ua/images/m4-logo-social.png">
    <meta property="og:image:secure_url" content="https://metroui.org.ua/images/m4-logo-social.png">
    <meta property="og:image:type" content="image/png">
    <meta property="og:image:width" content="968">
    <meta property="og:image:height" content="504">

    <meta name="author" content="Sergey Pimenov">
    <meta name="description" content="Makes simple client-side form validation easy, whilst still offering plenty of customization options.">
    <meta name="keywords" content="HTML, CSS, JS, Metro, CSS3, Javascript, HTML5, UI, Library, Web, Development, Framework">

    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="icon" href="favicon.ico" type="image/x-icon">

    <link href="metro/css/metro-all.css?ver=@@b-version" rel="stylesheet">
    <link href="highlight/styles/github.css" rel="stylesheet">
    <link href="docsearch/docsearch.min.css" rel="stylesheet">
    <link href="css/site.css" rel="stylesheet">

    <title>Validator - Metro 4 :: Popular HTML, CSS and JS library</title>
</head>
<body class="m4-cloak">

<header data-role="html-container" data-insert-mode="replace" data-html-source="header.html"></header>

<div data-role="html-container" data-insert-mode="replace" data-html-source="sidebar-menu.html"></div>

<div class="container-fluid docs-content">

    <div class="row flex-xl-nowrap">

            <div class="d-none d-block-xl cell-xl-2 order-2 border-left bd-light toc-wrapper">
                <h5>Table of contents</h5>
                <hr/>
                <ul class="toc-nav">
                    <li class="toc-entry"><a href="#">Validator</a></li>
                    <li class="toc-entry"><a href="#_validator_how_to">How to</a></li>
                    <li class="toc-entry"><a href="#_validator_feedback">Invalid feedback</a></li>
                    <li class="toc-entry">
                        <a href="#_validator_funcs">Functions</a>
                        <ul>
                            <li class="toc-entry"><a href="#_validator_func_required">Required</a></li>
                            <li class="toc-entry"><a href="#_validator_func_length">Length</a></li>
                            <li class="toc-entry"><a href="#_validator_func_minlength">Min length</a></li>
                            <li class="toc-entry"><a href="#_validator_func_maxlength">Max length</a></li>
                            <li class="toc-entry"><a href="#_validator_func_min">Min value</a></li>
                            <li class="toc-entry"><a href="#_validator_func_max">Max value</a></li>
                            <li class="toc-entry"><a href="#_validator_func_email">Email</a></li>
                            <li class="toc-entry"><a href="#_validator_func_domain">Domain</a></li>
                            <li class="toc-entry"><a href="#_validator_func_url">Url</a></li>
                            <li class="toc-entry"><a href="#_validator_func_date">Date</a></li>
                            <li class="toc-entry"><a href="#_validator_func_number">Number</a></li>
                            <li class="toc-entry"><a href="#_validator_func_integer">Integer</a></li>
                            <li class="toc-entry"><a href="#_validator_func_float">Float</a></li>
                            <li class="toc-entry"><a href="#_validator_func_digits">Digits</a></li>
                            <li class="toc-entry"><a href="#_validator_func_hexcolor">Hex color</a></li>
                            <li class="toc-entry"><a href="#_validator_func_color">Color</a></li>
                            <li class="toc-entry"><a href="#_validator_func_pattern">Pattern</a></li>
                            <li class="toc-entry"><a href="#_validator_func_compare">Compare</a></li>
                            <li class="toc-entry"><a href="#_validator_func_not">Not</a></li>
                            <li class="toc-entry"><a href="#_validator_func_notequals">NotEquals</a></li>
                            <li class="toc-entry"><a href="#_validator_func_equals">Equals</a></li>
                            <li class="toc-entry"><a href="#_validator_func_custom">Custom</a></li>
                        </ul>
                    </li>
                    <li class="toc-entry"><a href="#_validator_functions_mode">Functions mode</a></li>
                    <li class="toc-entry"><a href="#_validator_events">Events</a></li>
                    <li class="toc-entry"><a href="#_validator_submit">Submit</a></li>
                    <li class="toc-entry"><a href="#_validator_error_handling">Error handling</a></li>
                    <li class="toc-entry"><a href="#_validator_interactive">Interactive check</a></li>
                    <li class="toc-entry"><a href="#_validator_outside">Validating without a form</a></li>
                </ul>

            </div>

            <main class="cell-xl-10 order-1 pr-1-sx pl-1-sx pr-5-md pl-5-md">
                <div class="place-right d-none d-block-lg" style="width: 200px;">
                    <img src="images/logo.png" class="w-100" alt="">
                </div>

                <h1>Validator</h1>
                <p class="text-leader">
                    Makes simple client-side form validation easy, whilst still offering plenty of customization options.
                    The widget comes bundled with a useful set of validation methods, including URL, email, hex color, min and max values, length validation.
                </p>

                <!-- ads-html -->

                <h3 id="_validator_how_to">How to</h3>
                <p>
                    To activate Validator add attribute <code>data-role="validator"</code> to form and define validation functions over attribute <code>data-validate="..."</code> for inputs.
                </p>
                <p>
                    Supported elements: <code>input</code>, <code>select</code>, <code>textarea</code>, <code>checkbox</code>, <code>switch</code> and <code>radio</code>.
                    For <code>checkbox</code>, <code>switch</code> and <code>radio</code> you can use only <code>required</code> validation function.
                    More about form elements read in <a href="forms.html">this article</a>.
                </p>

                <div class="example">
                    <form data-role="validator" action="javascript:">
                        <div class="row mb-2">
                            <div class="cell-md-6">
                                <label>First name</label>
                                <input type="text" data-validate="required minlength=6" placeholder="Enter first name">
                                <span class="invalid_feedback">
                                    Input correct name with min length 6 symbols
                                </span>
                            </div>
                            <div class="cell-md-6">
                                <label>Email</label>
                                <input type="email" data-validate="required email" placeholder="Enter email" data-role="input" data-exclaim="*">
                                <span class="invalid_feedback">Input correct email address</span>
                            </div>
                        </div>

                        <div class="mt-2 mb-2">
                            <label>Select option</label>
                            <select data-role="select" data-validate="required not=-1" data-exclaim="!" class="exclaim-right">
                                <option value="-1" class="d-none"></option>
                                <option value="1">Value 1</option>
                                <option value="2">Value 2</option>
                                <option value="3">Value 3</option>
                            </select>
                            <span class="invalid_feedback">You must select a option!</span>
                        </div>

                        <div class="row mb-2">
                            <div class="cell-md-6">
                                <input type="checkbox" data-role="checkbox" data-caption="I accept the terms" data-validate="required">
                                <span class="invalid_feedback">You must accept this!</span>
                            </div>
                            <div class="cell-md-6">
                                <input type="radio" name="__r1" data-role="radio" value="1" data-validate="required" data-caption="Type 1">
                                <input type="radio" name="__r1" data-role="radio" value="2" data-validate="required" data-caption="Type 2">
                                <input type="radio" name="__r1" data-role="radio" value="3" data-validate="required" data-caption="Type 3">
                                <span class="invalid_feedback">You must select a option!</span>
                            </div>
                        </div>

                        <button class="button primary">Submit</button>
                    </form>
                </div>
                <pre class=""><code>
                    &lt;form data-role="validator" action="javascript:"&gt;
                        &lt;div class="row mb-2"&gt;
                            &lt;div class="cell-md-6"&gt;
                                &lt;label&gt;First name&lt;/label&gt;
                                &lt;input type="text"
                                    data-validate="required minlength=6"
                                    placeholder="Enter first name"&gt;
                                &lt;span class="invalid_feedback"&gt;
                                    Input correct name with min length 6 symbols
                                &lt;/span&gt;
                            &lt;/div&gt;
                            &lt;div class="cell-md-6"&gt;
                                &lt;label&gt;Email&lt;/label&gt;
                                &lt;input type="email"
                                    data-validate="required email"
                                    placeholder="Enter email" data-role="input"&gt;
                                &lt;span class="invalid_feedback"&gt;
                                    Input correct email address
                                &lt;/span&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;

                        &lt;div class="mt-2 mb-2"&gt;
                            &lt;label&gt;Select option&lt;/label&gt;
                            &lt;select data-role="select" data-validate="required not=-1"&gt;
                                &lt;option value="-1" class="d-none"&gt;&lt;/option&gt;
                                &lt;option value="1"&gt;Value 1&lt;/option&gt;
                                &lt;option value="2"&gt;Value 2&lt;/option&gt;
                                &lt;option value="3"&gt;Value 3&lt;/option&gt;
                            &lt;/select&gt;
                            &lt;span class="invalid_feedback"&gt;
                                You must select a option!
                            &lt;/span&gt;
                        &lt;/div&gt;

                        &lt;div class="row mb-2"&gt;
                            &lt;div class="cell-md-6"&gt;
                                &lt;input type="checkbox"
                                    data-role="checkbox"
                                    data-caption="I accept the terms"
                                    data-validate="required"&gt;
                                &lt;span class="invalid_feedback"&gt;
                                    You must accept this!
                                &lt;/span&gt;
                            &lt;/div&gt;
                            &lt;div class="cell-md-6"&gt;
                                &lt;input type="radio" name="__r1"
                                    data-role="radio" value="1"
                                    data-validate="required" data-caption="Type 1"&gt;
                                &lt;input type="radio" name="__r1"
                                    data-role="radio" value="2"
                                    data-validate="required" data-caption="Type 2"&gt;
                                &lt;input type="radio" name="__r1"
                                    data-role="radio" value="3"
                                    data-validate="required" data-caption="Type 3"&gt;
                                &lt;span class="invalid_feedback"
                                    &gt;You must select a option!
                                &lt;/span&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;

                        &lt;button class="button primary"&gt;Submit&lt;/button&gt;
                    &lt;/form&gt;
                </code></pre>

                <h4>Validating radio</h4>
                <p>
                    To validate <code>radio</code> component you must add attribute <code>name</code> to element and use validate function <code>required</code>.
                    Validate function must be added to all radio element.
                </p>
                <pre><code class="html">
                    &lt;input type="radio" name="__r1"
                        data-role="radio" value="1"
                        data-validate="required" data-caption="Type 1"&gt;
                    &lt;input type="radio" name="__r1"
                        data-role="radio" value="2"
                        data-validate="required" data-caption="Type 2"&gt;
                    &lt;input type="radio" name="__r1"
                        data-role="radio" value="3"
                        data-validate="required" data-caption="Type 3"&gt;
                </code></pre>

                <h4>Validating select</h4>
                <p>
                    To validate <code>select</code> component you must add specific first option and use validate functions:
                        <code>required</code>, <code>length</code>, <code>minlength</code>, <code>maxlength</code> and <code>not</code>.
                </p>
                <p>
                    <code>length</code>, <code>minlength</code>, <code>maxlength</code> - for use with select with <code>multiple</code> option.
                </p>
                <pre><code class="html">
                    &lt;select data-role="select" data-validate="required not=-1"&gt;
                        &lt;option value="-1" class="d-none"&gt;&lt;/option&gt;
                        &lt;option value="1"&gt;Value 1&lt;/option&gt;
                        &lt;option value="2"&gt;Value 2&lt;/option&gt;
                        &lt;option value="3"&gt;Value 3&lt;/option&gt;
                    &lt;/select&gt;
                </code></pre>

                <h3 id="_validator_feedback">Invalid feedback</h3>
                <p>
                    You can create user-friendly <strong>invalid feedback</strong>. To create it, add element with class <code>.invalid_feedback</code> after input.
                </p>
                <div class="example">
                    <form data-role="validator" action="javascript:">
                        <div class="mb-2">
                            <label>Email</label>
                            <input type="email" data-validate="required email" placeholder="Enter email" data-role="input">
                            <span class="invalid_feedback">Input correct email address</span>
                        </div>
                        <button class="button">Send</button>
                    </form>
                </div>
                <pre><code class="html">
                    &lt;label&gt;Email&lt;/label&gt;
                    &lt;input type="email"
                        data-validate="required email"
                        placeholder="Enter email" data-role="input"&gt;
                    &lt;span class="invalid_feedback"&gt;
                        Input correct email address
                    &lt;/span&gt;
                </code></pre>

                <h3 id="_validator_funcs">Functions</h3>
                <p>
                    Metro 4 Validator supports 12 validation functions.
                    To define validation for input add to input attribute <code>data-validate="..."</code>.
                    You can combine validation functions. To set function argument use record <code>func_name=arg</code>.
                </p>

                <div class="example">
                    <form data-role="validator" action="javascript:">
                        <div class="form-group">
                            <label>Input name (<small>required</small>)</label>
                            <input type="text" data-validate="required" name="nickname">
                        </div>
                        <div class="form-group">
                            <label>Input age (<small>required number</small>)</label>
                            <input type="text" data-validate="required number" name="age">
                        </div>
                        <div class="form-group">
                            <label>Input pin (<small>required digits length=4</small>)</label>
                            <input type="text" data-validate="required digits length=4" name="pin">
                        </div>
                        <div class="form-group">
                            <label>Input password (<small>required</small>)</label>
                            <input type="password" data-validate="required" name="pass1">
                        </div>
                        <div class="form-group">
                            <label>Input password again (<small>required compare=pass1</small>)</label>
                            <input type="password" data-validate="required compare=pass1" name="pass1_1">
                            <span class="invalid_feedback">
                                Pass1 and Pass2 must be equal.
                            </span>
                        </div>
                        <br />
                        <button class="button success">Submit</button>
                    </form>
                </div>
                <pre class=""><code>
                    &lt;form data-role="validator" action="javascript:"&gt;
                        &lt;div class="form-group"&gt;
                            &lt;label&gt;Input name&lt;/label&gt;
                            &lt;input type="text" data-validate="required" name="nickname"&gt;
                        &lt;/div&gt;
                        &lt;div class="form-group"&gt;
                            &lt;label&gt;Input age&lt;/label&gt;
                            &lt;input type="text" data-validate="required number" name="age"&gt;
                        &lt;/div&gt;
                        &lt;div class="form-group"&gt;
                            &lt;label&gt;Input pin&lt;/label&gt;
                            &lt;input type="text" data-validate="required digits length=4" name="pin"&gt;
                        &lt;/div&gt;
                        &lt;div class="form-group"&gt;
                            &lt;label&gt;Input password&lt;/label&gt;
                            &lt;input type="password" data-validate="required" name="pass1"&gt;
                        &lt;/div&gt;
                        &lt;div class="form-group"&gt;
                            &lt;label&gt;Input password again&lt;/label&gt;
                            &lt;input type="password" data-validate="required compare=pass1" name="pass2"&gt;
                            &lt;span class="invalid_feedback"&gt;
                                Pass1 and Pass2 must be equal.
                            &lt;/span&gt;
                        &lt;/div&gt;
                        &lt;br /&gt;
                        &lt;button class="button success"&gt;Submit&lt;/button&gt;
                    &lt;/form&gt;
                </code></pre>

                <h4>Validate functions</h4>
                <p>
                    You can use next functions for validating input value:
                        <code>required</code>,
                        <code>length</code>,
                        <code>minlength</code>,
                        <code>maxlength</code>,
                        <code>min</code>,
                        <code>max</code>,
                        <code>email</code>,
                        <code>domain</code>,
                        <code>url</code>,
                        <code>date</code>,
                        <code>number</code>,
                        <code>digits</code>,
                        <code>hexcolor</code>,
                        <code>color</code>,
                        <code>pattern</code>,
                        <code>compare</code>.
                        <code>not</code>,
                        <code>notequals</code> and
                        <code>custom</code>.
                </p>

                <ul class="unstyled-list mt-2">
                    <li id="_validator_func_required">
                        <strong>required</strong> - mark field as required. Value can not be empty.
                        <pre><code>
                            &lt;input type="text" data-validate="required"&gt;
                        </code></pre>
                    </li>

                    <li id="_validator_func_length">
                        <strong>length</strong> - set length for value in symbols
                        <pre><code>
                            &lt;input type="text" data-validate="length=4"&gt;
                        </code></pre>
                    </li>

                    <li id="_validator_func_minlength">
                        <strong>minlength</strong> - set min length for value in symbols
                        <pre><code>
                            &lt;input type="text" data-validate="minlength=4"&gt;
                        </code></pre>
                    </li>

                    <li id="_validator_func_maxlength">
                        <strong>maxlength</strong>: set max length for value in symbols
                        <pre><code>
                            &lt;input type="text" data-validate="maxlength=4"&gt;
                        </code></pre>
                    </li>

                    <li id="_validator_func_min">
                        <strong>min</strong> - value must be great or equal then <code>min</code>
                        <pre><code>
                            &lt;input type="text" data-validate="min=4"&gt;
                        </code></pre>
                    </li>

                    <li id="_validator_func_max">
                        <strong>max</strong>: value must be less or equal then <code>max</code>
                        <pre><code>
                            &lt;input type="text" data-validate="max=4"&gt;
                        </code></pre>
                    </li>

                    <li id="_validator_func_email">
                        <strong>email</strong> - value must be a valid email
                        <pre><code>
                            &lt;input type="text" data-validate="email"&gt;
                        </code></pre>
                    </li>

                    <li id="_validator_func_domain">
                        <strong>domain</strong> - value must be a valid domain name
                        <pre><code>
                            &lt;input type="text" data-validate="domain"&gt;
                        </code></pre>
                    </li>

                    <li id="_validator_func_url">
                        <strong>url</strong> - valid url required
                        <pre><code>
                            &lt;input type="text" data-validate="url"&gt;
                        </code></pre>
                    </li>

                    <li id="_validator_func_date">
                        <strong>date</strong> - valid date required
                        <pre><code>
                            &lt;input type="text" data-validate="date" data-value-format="_format_input_date_"&gt;
                        </code></pre>
                    </li>

                    <li id="_validator_func_number">
                        <strong>number</strong> - value must be a number
                        <pre><code>
                            &lt;input type="text" data-validate="number"&gt;
                        </code></pre>
                    </li>

                    <li id="_validator_func_integer">
                        <strong>integer</strong> - value must be a integer number
                        <pre><code>
                            &lt;input type="text" data-validate="integer"&gt;
                        </code></pre>
                    </li>

                    <li id="_validator_func_float">
                        <strong>float</strong> - value must be a float number
                        <pre><code>
                            &lt;input type="text" data-validate="float"&gt;
                        </code></pre>
                    </li>

                    <li id="_validator_func_digits">
                        <strong>digits</strong>: value must contains only digits
                        <pre><code>
                            &lt;input type="text" data-validate="digits"&gt;
                        </code></pre>
                    </li>

                    <li id="_validator_func_hexcolor">
                        <strong>hexcolor</strong> - value must be a valid hex color
                        <pre><code>
                            &lt;input type="text" data-validate="hexcolor"&gt;
                        </code></pre>
                    </li>

                    <li id="_validator_func_color">
                        <strong>color</strong> - value must contains standard color name
                        <pre><code>
                            &lt;input type="text" data-validate="color"&gt;
                        </code></pre>
                    </li>

                    <li id="_validator_func_pattern">
                        <strong>pattern</strong> - value must be equal with regex pattern. Currently regex modifiers not supported. Parsing regex modifiers will be added in next version.
                        <pre><code>
                            &lt;input type="text" data-validate="pattern=(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)"&gt;
                        </code></pre>
                    </li>

                    <li id="_validator_func_compare">
                        <strong>compare</strong> - value must be equal to compared input
                        <pre><code>
                            &lt;input type="password" data-validate="required" name="pass1"&gt;
                            &lt;input type="password" data-validate="required compare=pass1" name="pass2"&gt;
                        </code></pre>
                    </li>

                    <li id="_validator_func_not">
                        <strong>not</strong> - value must not be equal to compared value
                        <pre><code>
                            &lt;select data-role="select" data-validate="required not=-1"&gt;
                                &lt;option value="-1" class="d-none"&gt;&lt;/option&gt;
                                &lt;option value="1"&gt;Value 1&lt;/option&gt;
                                &lt;option value="2"&gt;Value 2&lt;/option&gt;
                                &lt;option value="3"&gt;Value 3&lt;/option&gt;
                            &lt;/select&gt;
                        </code></pre>
                    </li>

                    <li id="_validator_func_notequals">
                        <strong>notequals</strong> - value must not be equal to compared input
                        <pre><code>
                            &lt;input type="text" data-validate="required" name="ip_1"&gt;
                            &lt;input type="text" data-validate="required notequals=ip_1" name="ip_2"&gt;
                        </code></pre>
                    </li>

                    <li id="_validator_func_equals">
                        <strong>equals</strong> - value must be equal to compared input
                        <pre><code>
                            &lt;input type="text" data-validate="required" name="ip_1"&gt;
                            &lt;input type="text" data-validate="required equals=ip_1" name="ip_2"&gt;
                        </code></pre>
                    </li>

                    <li id="_validator_func_custom">
                        <strong>custom</strong> - required valid function exist name
                        <pre><code>
                            --- html
                            &lt;input type="text" data-validate="custom=myValidateFuncName"&gt;

                            ---- javascript
                            function myValidateFuncName(val){
                                val = parseInt(val);
                                return Metro.utils.isInt(val) && (val > 3 && val < 9);
                            }
                        </code></pre>
                    </li>
                </ul>

                <h4>Combine validating functions</h4>
                <p>
                    You can combine function. To use it, add function to attribute <code>data-validate</code> with <code>space</code> delimiter.
                </p>
                <pre><code>
                    &lt;input type="text" data-validate="required pattern=^[\w]{7,15}$"&gt;
                </code></pre>

                <!-- ads-html -->

                <h3 id="_validator_functions_mode">Functions mode</h3>
                <p class="text-small">New in 4.2.6</p>
                <p>
                    By default, all validating functions work in <strong>required mode</strong> - field value cannot be empty and must have required value.
                    You can change this behavior with special form attribute <code>data-required-mode</code>.
                    If you set this attribute to <code>false</code>, functions will work only if field value not empty or with <code>required</code> function in the pair.
                </p>
                <div class="example">
                    <p class="h5 text-light">Default behavior, check value is valid email and not empty</p>
                    <form data-role="validator" action="javascript:" class="mt-2">
                        <input type="text" data-validate="email">
                        <div class="form-actions">
                            <button class="button" type="submit">Submit</button>
                            <button class="button" type="reset">Reset</button>
                        </div>
                    </form>
                    <p class="h5 text-light">Required mode  - false, check value is valid email when not empty</p>
                    <form data-role="validator" data-required-mode="false" action="javascript:" class="mt-2">
                        <input type="text" data-validate="email">
                        <div class="form-actions">
                            <button class="button" type="submit">Submit</button>
                            <button class="button" type="reset">Reset</button>
                        </div>
                    </form>
                    <p class="h5 text-light">Required mode  - false, check value is valid email and not empty with rule required</p>
                    <form data-role="validator" data-required-mode="false" action="javascript:" class="mt-2">
                        <input type="text" data-validate="required email">
                        <div class="form-actions">
                            <button class="button" type="submit">Submit</button>
                            <button class="button" type="reset">Reset</button>
                        </div>
                    </form>
                </div>
                <pre><code>
                    &lt;p class="h5 text-light"&gt;
                        Default behavior, check value is valid email and not empty
                    &lt;/p&gt;
                    &lt;form data-role="validator" action="javascript:" class="mt-2"&gt;
                        &lt;input type="text" data-validate="email"&gt;
                        &lt;div class="form-actions"&gt;
                            &lt;button class="button" type="submit"&gt;Submit&lt;/button&gt;
                            &lt;button class="button" type="reset"&gt;Reset&lt;/button&gt;
                        &lt;/div&gt;
                    &lt;/form&gt;

                    &lt;p class="h5 text-light"&gt;
                        Required mode  - false, check value is valid email when not empty
                    &lt;/p&gt;
                    &lt;form data-role="validator" data-required-mode="false" action="javascript:" class="mt-2"&gt;
                        &lt;input type="text" data-validate="email"&gt;
                        &lt;div class="form-actions"&gt;
                            &lt;button class="button" type="submit"&gt;Submit&lt;/button&gt;
                            &lt;button class="button" type="reset"&gt;Reset&lt;/button&gt;
                        &lt;/div&gt;
                    &lt;/form&gt;

                    &lt;p class="h5 text-light"&gt;
                        Required mode  - false, check value is valid email and not empty with rule required
                    &lt;/p&gt;
                    &lt;form data-role="validator" data-required-mode="false" action="javascript:" class="mt-2"&gt;
                        &lt;input type="text" data-validate="required email"&gt;
                        &lt;div class="form-actions"&gt;
                            &lt;button class="button" type="submit"&gt;Submit&lt;/button&gt;
                            &lt;button class="button" type="reset"&gt;Reset&lt;/button&gt;
                        &lt;/div&gt;
                    &lt;/form&gt;
                </code></pre>

                <h3 id="_validator_events">Events</h3>
                <p>
                    When Validator is works, fired any events:
                        <code>onBeforeSubmit(form, data)</code>,
                        <code>onError(element, value)</code>,
                        <code>onValidate(element, value)</code>,
                        <code>onErrorForm(form, data)</code>,
                        <code>onValidateForm(form, data)</code>,
                        <code>onSubmit(form, data)</code>,
                        <code>onValidatorCreate(form)</code>.
                </p>
                <p>
                    To use event add attribute <code>data-on-*</code> to form.
                </p>
                <div class="example">
                    <form data-role="validator" action="javascript:" data-on-submit="alert('Your submitted name is: ' + this['nick_name'].value)">
                        <div class="row mb-2">
                            <div class="cell-md-6">
                                <label>Your nickname</label>
                                <input type="text" data-validate="minlength=3" placeholder="Enter your nickname" name="nick_name">
                                <span class="invalid_feedback">
                                    Input correct name with min length 6 symbols
                                </span>
                            </div>
                        </div>
                        <button class="button primary">Submit</button>
                    </form>
                </div>
                <pre class=""><code>
                    &lt;form data-role="validator" action="javascript:"
                          data-on-submit="alert('Your submitted name is: ' + this['nick_name'].value)"&gt;
                        &lt;div class="row mb-2"&gt;
                            &lt;div class="cell-md-6"&gt;
                                &lt;label&gt;Your nickname&lt;/label&gt;
                                &lt;input type="text" data-validate="minlength=6" name="nick_name"&gt;
                                &lt;span class="invalid_feedback"&gt;
                                    Input correct name with min length 6 symbols
                                &lt;/span&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                        &lt;button class="button primary"&gt;Submit&lt;/button&gt;
                    &lt;/form&gt;
                </code></pre>
                <table class="table cell-border table-border options-table">
                    <thead>
                    <tr>
                        <th>Event</th>
                        <th>Data</th>
                        <th>Context</th>
                        <th>Desc</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td><code>onError(el, val)</code></td>
                        <td><code>data-on-error</code></td>
                        <td><code>element</code></td>
                        <td>Event generate if field not passed validation</td>
                    </tr>
                    <tr>
                        <td><code>onValidate(el, val)</code></td>
                        <td><code>data-on-validate</code></td>
                        <td><code>element</code></td>
                        <td>Event generate if field passed validation</td>
                    </tr>
                    <tr>
                        <td><code>onErrorForm(log, el)</code></td>
                        <td><code>data-on-error-form</code></td>
                        <td><code>form</code></td>
                        <td>Event generate if form not passed validation</td>
                    </tr>
                    <tr>
                        <td><code>onValidateForm(el)</code></td>
                        <td><code>data-on-validate-form</code></td>
                        <td><code>form</code></td>
                        <td>Event generate if form passed validation</td>
                    </tr>
                    <tr>
                        <td><code>onBeforeSubmit(el)</code></td>
                        <td><code>data-on-before-submit</code></td>
                        <td><code>form</code></td>
                        <td>If this function return false, form will not be submitted</td>
                    </tr>
                    <tr>
                        <td><code>onSubmit(el)</code></td>
                        <td><code>data-on-submit</code></td>
                        <td><code>form</code></td>
                        <td>Event generate when form is submitted</td>
                    </tr>
                    </tbody>
                </table>

                <h3 id="_validator_submit">Submit form</h3>
                <p>
                    The following conditions must be met to send the form:
                </p>
                <ol class="decimal">
                    <li>The all the validations must be passed</li>
                    <li>If an <code>onBeforeSubmit</code> event is defined, it must return true</li>
                </ol>

                <h3 id="_validator_error_handling">Error handling</h3>
                <p>
                    If not passed all validations, a form will not be submitted. You can handling the validation errors with validator events:
                        <code>onError</code> and <code>onErrorForm</code>.
                </p>

                <h4 id="_validator_error_handling_onError">onError</h4>
                <p>
                    Event <code>onError</code> generated for each inputs when input not passed validation.
                </p>
                <div class="example">
                    <div class="row">
                        <div class="cell-md-6">
                            <form data-role="validator" action="javascript:"
                                  data-on-error="$('#handling-errors-onError').append(this.name + ': ' + this.value + '<br/>')">
                                <div class="form-group">
                                    <label>Input name (<small>required</small>)</label>
                                    <input type="text" data-validate="required" name="nickname">
                                </div>
                                <div class="form-group">
                                    <label>Input age (<small>required number</small>)</label>
                                    <input type="text" data-validate="required number" name="age">
                                </div>
                                <div class="form-group">
                                    <label>Input pin (<small>required digits length=4</small>)</label>
                                    <input type="text" data-validate="required digits length=4" name="pin">
                                </div>
                                <div class="form-group">
                                    <label>Input password (<small>required</small>)</label>
                                    <input type="password" data-validate="required" name="pass1">
                                </div>
                                <div class="form-group">
                                    <label>Input password again (<small>required compare=pass1</small>)</label>
                                    <input type="password" data-validate="required compare=pass1" name="pass1_1">
                                    <span class="invalid_feedback">
                                Pass1 and Pass2 must be equal.
                            </span>
                                </div>
                                <br />
                                <button class="button success">Submit</button>
                            </form>
                        </div>
                        <div class="cell-md-6">
                            <button class="button" onclick="$('#handling-errors-onError').html('')">Clear log</button>
                            <div id="handling-errors-onError"></div>
                        </div>
                    </div>
                </div>
                <pre><code class="html">
                    &lt;div class="row"&gt;
                        &lt;div class="cell-md-6"&gt;
                            &lt;form data-role="validator" action="javascript:"
                                  data-on-error="$('#handling-errors-onError').append(this.name + ': ' + this.value + '&lt;br/&gt;')"&gt;
                                &lt;div class="form-group"&gt;
                                    &lt;label&gt;Input name (&lt;small&gt;required&lt;/small&gt;)&lt;/label&gt;
                                    &lt;input type="text" data-validate="required" name="nickname"&gt;
                                &lt;/div&gt;
                                &lt;div class="form-group"&gt;
                                    &lt;label&gt;Input age (&lt;small&gt;required number&lt;/small&gt;)&lt;/label&gt;
                                    &lt;input type="text" data-validate="required number" name="age"&gt;
                                &lt;/div&gt;
                                &lt;div class="form-group"&gt;
                                    &lt;label&gt;Input pin (&lt;small&gt;required digits length=4&lt;/small&gt;)&lt;/label&gt;
                                    &lt;input type="text" data-validate="required digits length=4" name="pin"&gt;
                                &lt;/div&gt;
                                &lt;div class="form-group"&gt;
                                    &lt;label&gt;Input password (&lt;small&gt;required&lt;/small&gt;)&lt;/label&gt;
                                    &lt;input type="password" data-validate="required" name="pass1"&gt;
                                &lt;/div&gt;
                                &lt;div class="form-group"&gt;
                                    &lt;label&gt;Input password again (&lt;small&gt;required compare=pass1&lt;/small&gt;)&lt;/label&gt;
                                    &lt;input type="password" data-validate="required compare=pass1" name="pass1_1"&gt;
                                    &lt;span class="invalid_feedback"&gt;
                                Pass1 and Pass2 must be equal.
                            &lt;/span&gt;
                                &lt;/div&gt;
                                &lt;br /&gt;
                                &lt;button class="button success"&gt;Submit&lt;/button&gt;
                            &lt;/form&gt;
                        &lt;/div&gt;
                        &lt;div class="cell-md-6"&gt;
                            &lt;button class="button" onclick="$('#handling-errors-onError').html('')"&gt;Clear log&lt;/button&gt;
                            &lt;div id="handling-errors-onError"&gt;&lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                </code></pre>

                <h4 id="_validator_error_handling_onErrorForm">onErrorForm</h4>
                <p>
                    Event <code>onErrorForm</code> generated for form when input not passed validation. Argument for this event is object: <code>{input: el, name = '...', value: ..., funcs: [...], errors: [...]}</code>.
                </p>
                <ul class="unstyled-list mt-2">
                    <li><strong>input</strong> - html input element</li>
                    <li><strong>name</strong> - input name</li>
                    <li><strong>value</strong> - input value</li>
                    <li><strong>funcs</strong> - input validation functions as array</li>
                    <li><strong>errors</strong> - not passed validation functions as array</li>
                </ul>
                <div class="example">
                    <div class="row">
                        <div class="cell-md-6">
                            <form data-role="validator" action="javascript:"
                                  data-on-error-form="
                                  var log = arguments[0];
                                  var res = $('#handling-errors-onErrorForm');
                                  res.html('');
                                  $.each(log, function(){
                                        res.append(this.name + ': ' + this.errors.join(',') + '<br/>')
                                  })
                                  ">
                                <div class="form-group">
                                    <label>Input name (<small>required</small>)</label>
                                    <input type="text" data-validate="required" name="nickname">
                                </div>
                                <div class="form-group">
                                    <label>Input age (<small>required number</small>)</label>
                                    <input type="text" data-validate="required number" name="age">
                                </div>
                                <div class="form-group">
                                    <label>Input pin (<small>required digits length=4</small>)</label>
                                    <input type="text" data-validate="required digits length=4" name="pin">
                                </div>
                                <div class="form-group">
                                    <label>Input password (<small>required</small>)</label>
                                    <input type="password" data-validate="required" name="pass1">
                                </div>
                                <div class="form-group">
                                    <label>Input password again (<small>required compare=pass1</small>)</label>
                                    <input type="password" data-validate="required compare=pass1" name="pass1_1">
                                    <span class="invalid_feedback">
                                Pass1 and Pass2 must be equal.
                            </span>
                                </div>
                                <br />
                                <button class="button success">Submit</button>
                            </form>
                        </div>
                        <div class="cell-md-6">
                            <div id="handling-errors-onErrorForm"></div>
                        </div>
                    </div>
                </div>
                <pre><code class="html">
                    &lt;div class="row"&gt;
                        &lt;div class="cell-md-6"&gt;
                            &lt;form data-role="validator" action="javascript:"
                                  data-on-error="
                                  var log = arguments[0];
                                  var res = $('#handling-errors-onErrorForm');
                                  res.html('');
                                  $.each(log, function(){
                                        res.append(this.name + ': ' + this.errors.join(',') + '<br/>')
                                  })
                                  "&gt;
                                &lt;div class="form-group"&gt;
                                    &lt;label&gt;Input name (&lt;small&gt;required&lt;/small&gt;)&lt;/label&gt;
                                    &lt;input type="text" data-validate="required" name="nickname"&gt;
                                &lt;/div&gt;
                                &lt;div class="form-group"&gt;
                                    &lt;label&gt;Input age (&lt;small&gt;required number&lt;/small&gt;)&lt;/label&gt;
                                    &lt;input type="text" data-validate="required number" name="age"&gt;
                                &lt;/div&gt;
                                &lt;div class="form-group"&gt;
                                    &lt;label&gt;Input pin (&lt;small&gt;required digits length=4&lt;/small&gt;)&lt;/label&gt;
                                    &lt;input type="text" data-validate="required digits length=4" name="pin"&gt;
                                &lt;/div&gt;
                                &lt;div class="form-group"&gt;
                                    &lt;label&gt;Input password (&lt;small&gt;required&lt;/small&gt;)&lt;/label&gt;
                                    &lt;input type="password" data-validate="required" name="pass1"&gt;
                                &lt;/div&gt;
                                &lt;div class="form-group"&gt;
                                    &lt;label&gt;Input password again (&lt;small&gt;required compare=pass1&lt;/small&gt;)&lt;/label&gt;
                                    &lt;input type="password" data-validate="required compare=pass1" name="pass1_1"&gt;
                                    &lt;span class="invalid_feedback"&gt;
                                Pass1 and Pass2 must be equal.
                            &lt;/span&gt;
                                &lt;/div&gt;
                                &lt;br /&gt;
                                &lt;button class="button success"&gt;Submit&lt;/button&gt;
                            &lt;/form&gt;
                        &lt;/div&gt;
                        &lt;div class="cell-md-6"&gt;
                            &lt;button class="button" onclick="$('#handling-errors-onError').html('')"&gt;Clear log&lt;/button&gt;
                            &lt;div id="handling-errors-onError"&gt;&lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                </code></pre>

                <h3 id="_validator_interactive">Interactive check</h3>
                <p class="text-small text-muted">Thanks to <a href="https://www.facebook.com/itz.prabakar">Prabakar Decipher</a></p>
                <p>
                    If you set attribute <code>data-interactive-check</code> to <code>true</code>, validator checks input on user change input value.
                </p>
                <div class="example">
                    <form data-role="validator" action="javascript:" data-interactive-check="true">
                        <div class="row mb-2">
                            <div class="cell-md-6">
                                <label>First name</label>
                                <input type="text" data-validate="minlength=6" placeholder="Enter first name">
                                <span class="invalid_feedback">
                                    Input correct name with min length 6 symbols
                                </span>
                            </div>
                        </div>
                    </form>
                </div>
                <pre><code class="html">
                    &lt;form data-role="validator"
                            action="javascript:" data-interactive-check="true"&gt;
                        &lt;div class="row mb-2"&gt;
                            &lt;div class="cell-md-6"&gt;
                                &lt;label&gt;First name&lt;/label&gt;
                                &lt;input type="text" data-validate="minlength=6" placeholder="Enter first name"&gt;
                                &lt;span class="invalid_feedback"&gt;
                                    Input correct name with min length 6 symbols
                                &lt;/span&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/form&gt;
                </code></pre>
                <p>
                    This option only check input. When form submitted, validator check all values again.
                </p>

                <h3 id="_validator_outside">Validating without a form</h3>
                <p>
                    Also, you can use <strong>validator functions</strong> without a form. For use it without form, in <code>Metro 4</code> present object <code>Metro.validator</code> with all validation functions.
                </p>
                <pre><code class="javascript">
                    var validator = Metro.validator;
                    var field = $("#input_id"); // for input must be defined validation functions

                    validator.color("red") // return true
                    validator.color("blueRed") // return false

                    validator.validate(field, null) // return true or false
                </code></pre>

            </main>
        </div>

    </div>

    <script src="docsearch/docsearch.min.js"></script>


    <script src="metro/js/metro.js?ver=@@b-version"></script>
    <script src="highlight/highlight.pack.js"></script>
    <script src="js/clipboard.min.js"></script>
    <script src="js/site.js"></script>
    <!-- ads-script -->
    <!-- ga-script -->
    <!-- hit-ua -->
</body>
</html>